<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<%-- <script type="text/javascript"
	src="${ctx}/js/system/datacenter/clientInfo.js"></script> --%>

</head>
<body>
	<div class="hk-lwd">
		<form id="form" name="form" class="form-horizontal" method="post"
			action="${ctx}/datacenter/addFuncPackage.shtml?id=${func_crm.datasource_id}">
			<input type="hidden" name="clientid" id="clientid"
				value="${func_crm.id}">
			<header class="title">
				<ul class="clearfix">
					<li class="active">企业详情</li>
					<li>产品详情</li>
					<li>客户详情</li>
				</ul>
			</header>
			<section class="panel">
				<div class="panel-body chart">
					<div class="username">
						<i>企业名字：<span>${func_crm.enterprise}</span></i>
						<i>更新时间：
						<span>
						<fmt:formatDate value='${func_crm.ds_update_time}' pattern='yyyy-MM-dd HH:mm:ss'/>
						</span></i>
					</div>
					<div id="container" style="min-width: 600px; height: 400px"></div>
					<div class="total">
						<i>总容量:<span>${func_space.spec_value} MB</span></i>
						<i>创建时间:
						<span>
						<fmt:formatDate value='${func_space.ds_create_time}' pattern='yyyy-MM-dd HH:mm:ss'/>
						</span></i>
					</div>
				</div>

				<div class="panel-body product" style="display: none;">
					<div class="form-group">
						<div class=funcStrict>
							<i>当前CRM套餐版本：<span>${func_crm.spec_value} </span></i>
						</div>
						<div class=funcStrict>
							<i>当前用户套餐上限：<span>${func_entity.spec_value} 人</span></i>
						</div>
						<div class=funcStrict>
							<i>当前空间套餐上限：<span>${func_space.spec_value} MB</span></i>
						</div>
					</div>
				</div>

				<div class="panel-body tables" style="display: none;">
					<table id="customers">
						<thead>
							<tr>
								<th>用户名</th>
								<th>电话号码</th>
								<th>邮箱地址</th>
								<th>用户状态</th>
							</tr>
						</thead>
						<tbody>

						</tbody>
					</table>

					<div class="doc-buttons" id="resText"></div>
				</div>
			</section>

		</form>
		<input type="hidden" id="space_total"
			value=" ${func_space.spec_value}">
	</div>
</body>
</html>

<script>
	/*选项卡*/
	$("#form .title li").on("click", function() {
		ind = $("#form .title li").index(this);
		$(this).addClass("active").siblings().removeClass("active");
		$("#form .panel .panel-body").eq(ind).show().siblings().hide();

	})
	//循环json数据渲染到表格
	var t_able;
	$
			.ajax({
				type : "post",
				url : rootPath + "/datacenter/searchEnUserList.shtml?id="
						+ "${func_crm.id}&db_name="
						+ "${db_name}",
				dataType : "json",
				success : function(data) {
					for (var i = 0; i < data.length; i++) {
						var status=data[i].status ;
						var showStatus=null;
						if(status==0){
							showStatus="异常";
						}else if(status==1){
							showStatus="正常";
						}else if(status==2){
							showStatus="冻结";
						}else if(status==3){
							showStatus="伪删除";
						}
						//alert(data[i].email);	        			        		
						t_able = '<tr>' + '<td>' + data[i].username + '</td>'
								+ '<td>' + data[i].cellphone + '</td>' + '<td>'
								+ data[i].email + '</td>'+'<td>' + showStatus + '</td>' + '</tr>';
						$(t_able).appendTo("#customers tbody");
					}
				}
			})

	$(function() {
		//百分比图形
		// Build the chart
		var clientid = $("#clientid").val();
		var used = ${func_crm.enterprise_space};
		var total1 = $("#space_total").val();
		$("container").detach();
		var num = total1 - used;
		$('#container').highcharts({
			chart : {
				plotBackgroundColor : null,
				plotBorderWidth : null,
				plotShadow : true
			},
			title : {
				text : '空间使用情况'
			},
			tooltip : {
				pointFormat : '{series.name}: <b>{point.y:.1f}MB</b>'
			},
			plotOptions : {
				pie : {
					allowPointSelect : true,
					cursor : 'pointer',
					dataLabels : {
						enabled : false
					},
					showInLegend : true
				}
			},
			series : [ {
				type : 'pie',
				name : '空间',
				data : [ [ '已使用', used ], [ '剩余', num ], ]
			} ]
		});
	})
	$("#highcharts-0 text[y=395]").remove()
</script>

<link rel="stylesheet" href="css/style.css">
<style type="text/css">
* {
	margin: 0px;
	padding: 0px;
}

.hk-lwd {
	height: 600px;
	width: 650px;
	overflow: hidden;
}

ul, li {
	list-style: none;
}

.hk-lwd #form header.title {
	background: #F8F8F8;
	height: 40px;
}

.hk-lwd #form header.title ul li {
	height: 40px;
	line-height: 40px;
	float: left;
	padding: 0 10px;
	cursor: pointer;
	color: #333;
}

.hk-lwd #form header.title ul li.active {
	background: #fff;
	border-bottom: 1px solid #fff;
	border-right: 1px solid #e2e2e2;
	border-left: 1px solid #e2e2e2;
	margin-bottom: -1px;
}

.hk-lwd .panel {
	height: 485px;
	position: relative;
}

.hk-lwd .panel-body {
	position: absolute;
	top: 0px;
	height: 485px;
	min-width: 600px;
}

.hk-lwd .product {
	padding: 50px;
	box-sizing: border-box;
	-moz-box-sizing: border-box; /* Firefox */
	-webkit-box-sizing: border-box; /* chrome */
}

.hk-lwd .panel-body .form-group {
	margin: 15px 0;
	padding-left: 15px;
	box-sizing: border-box;
	-moz-box-sizing: border-box; /* Firefox */
	-webkit-box-sizing: border-box; /* chrome */
	height: 40px;
}

.hk-lwd .panel-body .form-group .col-sm-3 {
	width: 20%;
	float: left;
}

.hk-lwd .panel-body .form-group .col-sm-9 {
	width: 66%;
	float: left;
}

.hk-lwd .panel-body .form-group .col-sm-9 input {
	width: 80%;
}

.hk-lwd .panel-body .form-group select {
	width: 20%;
	padding: 0 20px;
}

.hk-lwd .panel-body .username {
	padding: 5px 20px;
	font-size: 18px;
}

.hk-lwd .panel-body .total {
	padding-left: 20px;
	color: rgb(67, 67, 72);
	font-size: 18px;
}

.hk-lwd .panel-f_ooter .btn {
	min-width: 90px;
	border-radius: 10px solid #ccc;
	color: #fff;
	background-color: #8ec165;
	display: block;
	padding: 6px 12px;
	float: right;
}

.hk-lwd #probusinessid {
	padding: 5px;
	margin-left: 15px;
}

#customers {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	width: 100%;
	border-collapse: collapse;
}

#customers td, #customers th {
	font-size: 1em;
	border: 1px solid #ccc;
	padding: 3px 7px 2px 7px;
}

#customers th {
	font-size: 1.1em;
	text-align: left;
	padding-top: 5px;
	padding-bottom: 4px;
	background-color: #ccc;
	color: #ffffff;
}

table.gridtable {
	font-family: verdana, arial, sans-serif;
	font-size: 13px;
	color: #333333;
	border-width: 1px;
	border-color: #666666;
	border-collapse: collapse;
}

table.gridtable th {
	border-width: 1px;
	padding: 8px;
	border-style: solid;
	border-color: #666666;
	background-color: #dedede;
}

table.gridtable td {
	border-width: 1px;
	padding: 13px;
	border-style: solid;
	border-color: #666666;
	background-color: #ffffff;
}
</style>